{extend name='index@template/base'}{/extend}

{block name='style'}
<link href="__STATIC__/plugins/jquery-treegrid/css/jquery.treegrid.css" rel="stylesheet" type="text/css"/>
<style>
    table {
        border: 1px solid #e4e4e4;
    }

    th, td {
        border-top: 1px solid #e4e4e4 !important;
        border-left: 1px solid #e4e4e4 !important;
    }
    .add-child-icon{font-size: 12px;cursor: pointer;padding-left: 10px;}

    #toolbar .btn-group {
        margin: 10px;
    }
</style>
{/block}
{block name='script'}
<script src="__STATIC__/plugins/bootstrap-treeview/bootstrap-treeview.min.js"></script>
{/block}
{block name='content'}
<section class="content">
    <!--表格开始--------------------------------------------------------------------------------------------------------------------------------->
    <div class="row">
        <div class="col-xs-12">
            <div id="toolbar">
                <div class="btn-group pull-left">
                    <a class="btn btn-primary" id="add_btn"><i class="fa fa-plus"></i> 添加商品分类</a>
                </div>
                <div class="btn-group pull-right">
                    <a class="btn btn-default" onclick="window.location.reload()"><i class="fa fa-refresh"></i></a>
                </div>
            </div>
            <table class="table tree">
                <tr>
                    <th>分类名称</th>
                    <th  class="hidden-xs">分类图标</th>
                    <th  class="hidden-xs">排序</th>
                    <th  class="hidden-xs">是否显示</th>
                    <th>操作</th>
                </tr>
                {foreach $list as $cate}
                <tr class="treegrid-{$cate.id}{if $cate.parent_id>0} treegrid-parent-{$cate.parent_id}{/if} ks-form"
                    id="tr{$cate.id}">
                    <td class="form-inline">
                        <!--<input class="form-control" type="text" name="name" value="{$cate.name}"/>-->
                        <span class="font-grey-cascade"><i class="{$cate.icon}" style="padding-right: 10px"></i>{$cate.name}</span>
                    </td>
                    <td class="hidden-xs">
                        <span class="font-grey-cascade">{$cate.icon}</span>
                    </td>
                    <td class="hidden-xs">
                        <span class="font-grey-cascade">{$cate.sort}</span>
                    </td>
                    <td class="hidden-xs">
                        <span class="font-grey-cascade">{if $cate.flag_use eq 0}<i class="fa fa-minus-circle text-yellow" title="正常"></i>{else /}<i class="fa fa-check-circle text-green" title="显示中"></i>{/if}</span>
                    </td>
                    <td>
                        <button onclick="edit_data('{$cate.id}')" class="btn btn-warning btn-xs row_edit" href="javascript:void(0)">
                            <i class="fa fa-edit"></i> 修改
                        </button>
                        <button onclick="delete_data('{$cate.id}')" class="btn btn-danger btn-xs row_delete" href="javascript:void(0)">
                            <i class="fa fa-trash"></i> 删除
                        </button>
                        <input class="form-control" type="hidden" name="id" value="{$cate.id}"/>
                    </td>
                </tr>
                {/foreach}
            </table>
        </div>
    </div>
</section>
{/block}
{block name='script_extra'}
<!--树形表格-------------------------------------------------------开始-->
<script src="__STATIC__/plugins/jquery-treegrid/js/jquery.treegrid.js" type="text/javascript"></script>
<script src="__STATIC__/plugins/jquery-treegrid/js/jquery.treegrid.bootstrap3.js" type="text/javascript"></script>
<script>
    var add_data_url="{:url('ShopGoodsCategory/add')}";
    var edit_data_url="{:url('ShopGoodsCategory/edit')}";
    var delete_data_url="{:url('ShopGoodsCategory/delete')}";
    var set_power_id_url="{:url('ShopGoodsCategory/set_power')}";
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.tree').treegrid({
            expanderExpandedClass: 'fa fa-minus-square',
            expanderCollapsedClass: 'fa fa-plus-square'
        });
    });
    function urlFormat(url) {
        if( url.indexOf('.html')){
            url=url.replace('.html','')
        }
        return url;
    }

    $('.add-child-icon').mouseover(function () {
        layer.tips('新增子菜单', this,{time: 1000,tips: [1, '#3595CC']});
    });
    function add_data(parent_id) {
        layer_open('添加菜单2342342',urlFormat(add_data_url)+'/parent_id/'+parent_id);
    }
    function set_power_id(id) {
        layer_open('设置权限目录',urlFormat(set_power_id_url)+'/id/'+id);
    }
    function edit_data(id) {
        layer_open('修改菜单名称',urlFormat(edit_data_url)+'/id/'+id);
    }

    function delete_data(id) {
        layer.confirm('你确定要删除该选项吗？',{btn:['确定','取消']},function () {
            $.ajax({
                dataType:'json',
                data:{id:id},
                url:delete_data_url,
                success:function (res) {
                    if(res.success){
                        layer.msg(res.message, {time: 1000},function () {
                            window.location.reload();
                        });
                    }else{
                        layer.alert(res.message);
                    }
                }
            })
        })
    }

    $('#add_btn').on('click',function () {
        layer_open('添加商品分类',add_data_url);
    })
</script>
<!--树形表格-------------------------------------------------------结束-->
{/block}